<template>
  <div class="report">
    <h3 class="title">思想汇报</h3>
    <div class="content">
      <mu-form ref="reportForm" :model="validateForm">
        <mu-form-item prop="title" :rules="titleRules">
          <div class="label">
            <i>*</i>标题
          </div>
          <mu-text-field
            placeholder="请输入标题"
            solo
            class="input"
            v-model="validateForm.title"
            prop="title"
          ></mu-text-field>
        </mu-form-item>
        <mu-form-item prop="content" :rules="contentRules">
          <div class="label">
            <i>*</i>内容
          </div>
          <mu-text-field
            placeholder="请输入内容"
            multi-line
            solo
            class="input"
            v-model="validateForm.content"
            prop="content"
          ></mu-text-field>
        </mu-form-item>
      </mu-form>
      <div class="label">
        上传照片
        <span class="tip">*最多上传9张照片</span>
      </div>
      <div class="imgBlock">
        <div v-for="(item,index) in imgList" :key="index" class="img">
            <img :src="item" alt>
          <i @click="deletePic(index)">
            <img src="@as/img/wode_delete.png" alt>
          </i>
        </div>
        <uploader
          v-if="imgList.length<9"
          class="uploader"
          :after-read="onRead"
        />
      </div>
    </div>
    <div class="btn" @click="submit">提交</div>
  </div>
</template>

<script>
import uploader from 'vant/lib/uploader';
import 'vant/lib/uploader/style';
import axios from 'axios';
export default {
  data() {
    return {
      qiniuData: {
        token: '',
        key: ''
      },
      refreshing: false,
      loading: false,
      imgList: [],
      validateForm: {
        title: '',
        content: ''
      },
      titleRules: [
        { validate: (val) => !!val, message: '请输入标题' }
      ],
      contentRules: [
        { validate: (val) => !!val, message: '请输入内容' }
      ]
    }
  },
  created() {
    this.getToken()
  },
  mounted() {
    this.$progress.done()
  },
  methods: {
    goReportList() {
      this.$router.push({ path: '/mine/report/list' })
    },
    S4() {
      return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
    },
    guid() {
      return (this.S4() + this.S4() + "-" + this.S4() + "-" + this.S4() + "-" + this.S4() + "-" + this.S4() + this.S4() + this.S4());
    },
    onRead(file) {
      console.log(file)
      this.qiniuData.key = this.guid()
      this.qiniuData.file = file.file
      let param = new FormData(); //创建form对象
      param.append('chunk','0');//断点传输
      param.append('chunks','1');
      param.append('file',file.file,file.file.name)
      param.append('token',this.qiniuData.token)
      param.append('key',this.qiniuData.key)
      console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传
      const url = `https://up-z2.qiniup.com`
      axios.post(url,param,{headers: {'Content-Type':'multipart/form-data'}}).then(res=>{
        console.log(res)
        let pic = `https://media.71ydj.com/${res.data.key}`
        this.imgList.push(pic)
      })
    },
    getToken() {
      const url = `index/index/qiniu`
      this.$http.post(url).then(res => {
        this.qiniuData.token = res.data.token
      })
    },
    submit() {
      this.$refs.reportForm.validate().then((result) => {
        if (result) {
          let params = {
            uid: JSON.parse(Cookies.get('user_71ydj')).id,
            title: this.validateForm.title,
            content: this.validateForm.content,
            picture: this.imgList.join(',')
          }
          const url = `app/report/create`
          this.$http.post(url, params).then(res => {
            if (res.code === 200) {
              this.$toast.success(res.msg);
              this.$router.push({ path: '/mine/report/content',query:res.data})
            } else {
              this.$toast.error(res.msg);
            }
          })
        }
      });
    },
    deletePic(i){
      this.imgList.splice(i,1)
    }
  },
  components: {
    uploader
  }
}
</script>
<style lang="scss">
.report{
  position: relative;
  overflow-x: hidden;
  .title{
    font-size:28px;
    font-family:PingFang-SC-Bold;
    font-weight:bold;
    color:rgba(51,51,51,1);
    padding: 34px 0;
    padding-left: 13px;
    margin: 0;
  }
  .btn{
    margin: 60px auto 20px;
    width:343px;
    height:44px;
    line-height: 44px;
    text-align: center;
    background:rgba(235,77,68,1);
    border-radius:4px;
    font-size:16px;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(255,255,255,1);
  }
  .content{
    box-sizing: border-box;
    width: 100%;
    padding: 0 16px;
    .label{
      font-size:16px;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:#333333;
      margin-bottom: 10px;
      i{
        font-style: normal;
        color:rgba(235,77,68,1);
        margin-right: 5px;
      }
      span{
        font-size:10px;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(153,153,153,1);
      }
    }
    input,textarea{
      width: 100%;
      box-sizing: border-box;
      height:40px;
      background:rgba(255,255,255,1);
      border:1px solid rgba(221,221,221,1);
      border-radius:4px;
      font-size:14px;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      padding: 0 20px;
      outline: 0;
      &::placeholder{  
        color:rgba(204,204,204,1);
      }
    }
    textarea{
      padding: 14px 20px;
      height: 200px !important;
      
    }
    .imgBlock{
      .img{
        position: relative;
        display: inline-block;
        width:107px;
        height:107px;
        margin-right: 11px;
        border-radius:4px;
        >img{
          width:107px;
          height:107px;
          border-radius:4px;
        }
        &:nth-of-type(3n){
          margin: 0
        }
        i{
          z-index: 99;
          position: absolute;
          top: -7px;
          right: -7px;
          width:20px;
          height:20px;
          img{
            display: block;
            width: 100%;
            height:100%;
          }
        }
      }
      .uploader{
        display: inline-block;
        width:107px;
        height:107px;
        border-radius:4px;
        background: url(../../../../assets/img/add_photo.png) center no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  .mu-form-item{
    margin-bottom: 28px;
  }
}
</style>
